<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src='./src/vue.js'></script>
	</head>

	<body>
		<div id="app">
			<ul>
				<li>123</li>
				<li>123</li>
				<p>hello</p>
			</ul>
			<table>
				<!-- <custom></custom> -->
				<tr is='custom'></tr>
			</table>
			<custom2></custom2>
			<p is="custom2"></p>
		</div>
		
		<script>
			// 限制 不能再table写上自定义标签

			Vue.component('custom',{
				template: `<tr><td>hello</td></tr>`
			})
			Vue.component('custom2',{
				template: `<div>hello</div>`
			})


			let vm = new Vue({
				data:{
					list: [{id:123,title:'miaowei'},{id:456,title:'11111'}]
				},
				methods: {
					handle(ev){
						ev.target.style.background = 'red';
					},
					removeFirst () {
						this.list.splice(0,1)
					},
					reverse(){
						this.list.reverse();
					}
				}
			})

			setTimeout(function (){
				vm.$mount('#app');	
			},3000)
		</script>
	</body>
</html>